<template>
    <section class="newRecharge">
        <search-title></search-title>
        <header class="rechargeHeader">
            <div class="headerTextBox">
                <p>为您提供源源不断的灵感，也为您节约大量时间</p>
                <p>设计师是充满创意的职业，您不必将时间花在素材的收集上，让每分每秒都产生好的方案</p>
            </div>
        </header>
        <div class="wrap rechargeBox">
            <div>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="VIP充值" name="vipRecharge">
                        <recharge-vip :userInfo="user"></recharge-vip>
                    </el-tab-pane>
                    <el-tab-pane label="交易币充值" name="moneyRecharge">
                        <recharge-money :userInfo="user"></recharge-money>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <footer class="rechargeProblem">
                <h3>常见问题</h3>
                <ul class="clearfix">
                    <li>
                        <h4>1.集设网提供什么服务？</h4>
                        <p>集设网提供设计类相关素材的下载，包括3d模型，SU模型，CAD，贴图，设计案例，设计软件。</p>
                    </li>
                    <li>
                        <h4>2.素材定价</h4>
                        <p>所有素材售价在2元-20元之间，您可以从详情页查看详细价格。适当的收费是为了鼓励网站和作者制作更好的内容。</p>
                    </li>
                    <li>
                        <h4>3.会员身份的区别</h4>
                        <p>注册账号后，您就是我们的普通会员。详细的使用区别可以从上文表格里查看。vip会员和普通会员都是我们最大的财富，感谢您的使用。</p>
                    </li>
                </ul>
            </footer>
        </div>
    </section>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading'
import QRCode from 'qrcodejs2'
export default {
    data(){
        return{
            // activeVip : "moneyRecharge",
            activeName: this.$route.params.vip||'vipRecharge',//切换页
        }
    },
    components:{
        loading,
        searchTitle : resolve => require(["../searchTitle/searchTitle"], resolve),//搜索头部
        rechargeMoney : resolve => require(["./rechargeMoney"], resolve),//搜索头部
        rechargeVip : resolve => require(["./rechargeVip"], resolve),//搜索头部
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
           
        
    },
     metaInfo () {
      return {
        title: '会员充值_交易币充值_集设网',
        meta: [
            {                 // set meta
                name: 'description',
                content: ''
            }
        ]
      }
    },
}
</script>
<style>
    .newRecharge{
        padding-top: 71px;
    }
    .newRecharge .rechargeBox{
        margin-top: -85px;
        background: #fff;
        padding: 0 76px;
        padding-top: 34px;
        margin-bottom: 42px;
        /* box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08); */
    }
    .rechargeHeader{
        height:237px;
        background:url(./img/titleImg.png) no-repeat center;
    }
    .headerTextBox{
        width: 780px;
        text-align: center;
        margin: 0 auto;
        padding-top: 42px;
    }
    .headerTextBox p:nth-of-type(1){
        font-size: 34px;
        line-height: 56px;
        color: #fff;
        font-weight: bold;
    }
    .headerTextBox p:nth-of-type(2){
        font-size: 14px;
        line-height: 40px;
        color: #fff;
    }
    .newRecharge .el-tabs__nav{
        float: none;
        width: 241px;
        height: 38px;
        border: 1px solid #f45d54;
        margin: 0 auto;
        margin-bottom: 15px;
    } 
    .newRecharge .el-tabs__item{
        float: left;
        width: 119px;
        line-height: 38px;
        font-size: 14px; 
        text-align: center;
        color: #f45d54;
        padding: 0;
        height: 38px;
    }
    .newRecharge .el-tabs__active-bar{
        display: none;
    }
    .newRecharge .is-active{
        color: #fff;
        background: #f45d54;
        width: 120px;
        height: 36px;
    }
    .rechargeProblem{
        padding: 0 78px;
        padding-top: 33px;
         color: #333333;
         padding-bottom: 32px;
    }
    .rechargeProblem h3{
        font-size: 20px;
        line-height: 48px;
    }
    .rechargeProblem h4{
        font-size: 16px;
        line-height: 40px;
       
    }
    .rechargeProblem li{
        float: left;
        width: 365px;
        margin-right: 110px;
        margin-bottom: 22px;
    }
    .rechargeProblem p{
        font-size: 14px;
        line-height: 20px;
    }
    .rechargeMask{
    position: fixed;
    top: 0;
    left: 0;
    z-index:1111;
    width: 100%;
    height: 100%;
    background: rgba(0, 0,0,.6)
}
.rechargeMaskBox{
    width: 330px;
    height: 330px;
    background: #fff;
    position: absolute;
}
.rechargeMaskTitle{
    font-size: 18px;
    line-height: 38px;
    color: #ea514b;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}
.rechargeMaskScanning{
    font-size: 14px;
    line-height: 30px;
    color: #232323;
    text-align: center;
}
.rechargeMaskClose{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    font-size: 20px;
    width: 25px;
    height: 25px;
}
</style>
